<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>最后的轻语</title>
  <style>
    @import url(https://at.alicdn.com/t/c/font_4453025_zzi2gvdtum.css);

    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      height: 100%;
      font-size: 14px;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: #f0f0f0;

    }

    .content {
      flex: 1;
      overflow: auto;
      padding: 10px;
      background-image: url(static/img/jiayi1.JPG);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .created-time {
      font-size: 13px;
      text-align: right;
      margin-top: 8px;
    }

    .card {
      background-color: rgba(255, 255, 255, 0.2);
      padding: 8px;
      margin-bottom: 10px;
      border-radius: 6px;
    }

    .card .text {
      line-height: 20px;
    }

    img {
      display: block;
    }

    #back {
      flex: 1;
      border: 1px solid #d05f5f;
      padding: 8px 4px;
      background-color: transparent;
      color: #d05f5f;
      border-radius: 8px;
      margin-right: 10px;
    }

    .no-more {
      font-size: 13px;
      color: #5a5a5a;
      text-align: center;
    }

    .footer {
      display: flex;
      padding: 10px;
    }

    #clear-text {
      flex: 1;
      border: 1px solid #d05f5f;
      padding: 8px 4px;
      background-color: transparent;
      color: #d05f5f;
      border-radius: 8px;
    }

    .toggle-mute {
      position: absolute;
      top: 0px;
      right: 0px;
      color: #ffc0cb;
      z-index: 9999;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="toggle-mute iconfont icon-574bofangyinle"></div>

    <div class="content">
      <div class="card">
        <div class="text">
          12月20认识佳宜。
        </div>
        <div class="created-time">2024-01-08 10:20:59</div>
      </div>

      <div class="card">
        <div class="text">
          今天陆佳宜跟我吵架，我生气她，我下班他就打游戏，记仇+1。
        </div>
        <div class="created-time">2024-01-13 23:01:23</div>
      </div>

      <div class="card">
        <div class="text">
          佳宜陪我打暗区好可爱啊，她说要嫁给我。我爱你。
        </div>
        <div class="created-time">2024-01-15 01:20:47</div>
      </div>

      <div class="card">
        <div class="text">
          今天很爱佳宜没有吵架。
        </div>
        <div class="created-time">2024-01-14 22:11:18</div>
      </div>

      <div class="card">
        <div class="text">
          今天很爱佳宜没有吵架。
        </div>
        <div class="created-time">2024-01-16 23:27:01</div>
      </div>

      <div class="card">
        <div class="text">今天没有瑟瑟，跟佳宜聊了很多小时候的事情，她很开心。</div>
        <div class="created-time">2024-01-17 00:28:31</div>
      </div>

      <div class="card">
        <div class="text">佳宜想妈妈了，以后哥一定会带你去见他们的。</div>
        <div class="created-time">2024-01-18 00:11:23</div>
      </div>

      <div class="card">
        <div class="text">佳宜说她想要的是我全部</div>
        <div class="created-time">2024-01-20 23:36:50</div>
      </div>

      <div class="card">
        <div class="text">佳宜跟我说关于爸爸的事情哭唧唧了，佳宜想要的是全部的爱，我都给佳宜。</div>
        <div class="created-time">2024-01-21 00:40:13</div>
      </div>

      <div class="card">
        <div class="text">她变得有点陌生了，说话好狠。</div>
        <div class="created-time">2024-01-26 22:51:40</div>
      </div>

      <div class="card">
        <div class="text">今天很伤心，原来佳宜不只和我ss，我真不知道该怎么办了，我有跟你说过我很在意这种事情。</div>
        <div class="created-time">2024-02-02 01:37:23</div>
      </div>

      <div class="card">
        <div class="text">唉，你说的在意我多一点是真是假啊</div>
        <div class="created-time">2024-02-05 00:26:55</div>
      </div>

      <div class="card">
        <div class="text">最近都在吵架...</div>
        <div class="created-time">2024-02-11 23:09:14</div>
      </div>

      <div class="card">
        <div class="text">这次是不是真的就要散了呢</div>
        <div class="created-time">2024-01-19 02:10:42</div>
      </div>

      <div class="card">
        <div class="text">今天没有陆佳宜</div>
        <div class="created-time">2024-01-20 21:01:13</div>
      </div>

      <div class="card">
        <div class="text">今天还是没有陆佳宜,为什么我就是放不下你，想她。</div>
        <div class="created-time">2024-01-21 20:31:43</div>
      </div>

      <div class="card">
        <div class="text">太想她，找她了，哄好了~</div>
        <div class="created-time">2024-01-22 23:29:07</div>
      </div>

      <div class="card">
        <div class="text">吵架了，她说她男人多不缺我，说我是舔狗，每次都是我找她,“再找你我就是你养的”，嗯，她把这句话还我了</div>
        <div class="created-time">2024-01-24 02:47:17</div>
      </div>

      <div class="card">
        <div class="text">佳宜说3月底会来找我，开心~</div>
        <div class="created-time">2024-02-08 14:20:49</div>
      </div>

      <div class="card">
        <div class="text">我们能坚持到3月底吗？</div>
        <div class="created-time">2024-02-15 22:50:11</div>
      </div>

      <div class="card">
        <div class="text">你说在意我多一点是真的，这将是我最后的底牌</div>
        <div class="created-time">2024-02-19 23:21:40</div>
      </div>

      <div class="card">
        <div class="text">今天过生日了，佳宜熬夜到12点，是第一个跟我说生日快乐的人，我爱她。</div>
        <div class="created-time">2024-02-21 08:53:29</div>
      </div>

      <div class="card">
        <div class="text">跟何家乐吵完架陆佳宜拉黑我，可能她始终不会在意我的感受吧。</div>
        <div class="created-time">2024-02-28 01:40:38</div>
      </div>

      <div class="card">
        <div class="text">准备加她和好</div>
        <div class="created-time">2024-03-02 08:20:16</div>
      </div>

      <div class="card">
        <div class="text">我不该瞒着她打王者的，可是我就是怕她想多啊，你总是不相信我</div>
        <div class="created-time">2024-03-03 23:12:57</div>
      </div>

      <div class="card">
        <div class="text">我还能陪你多久。</div>
        <div class="created-time">2024-03-04 08:02:19</div>
      </div>

      <div class="card">
        <div class="text">
          我离开的话，对佳宜来说，应该是最好的选择了，我也知道刚才佳宜拉黑是因为想哭，我懂你。我都这么大了还天天纠缠小女孩，我离开之后呢，希望你好好爱一个人，不要做坏女人，我也知道你这样做的目的就是不想太依赖一个人，吵架你会很难过，我太懂你了，佳宜要嘛就不要谈恋爱了，等你长大点再谈。对了，不要那样想我，我远比你想象中爱你。
        </div>
        <div class="created-time">2024-03-04 14:55:23</div>
      </div>

      <div class="card">
        <div class="text">
          和好咯~~~~~
        </div>
        <div class="created-time">2024-03-04 20:26:31</div>
      </div>

      <div class="card">
        <div class="text">
          噢耶，佳宜是我的咯
        </div>
        <div class="created-time">2024-03-05 00:10:09</div>
      </div>

      <div class="card">
        <div class="text">
          给佳宜拍了好多风景照，期待佳宜跟我一起散步，走我走过的路。
        </div>
        <div class="created-time">2024-03-21 20:20:01</div>
      </div>

      <div class="card">
        <div class="text">
          佳宜上qq查岗了，她会开心
        </div>
        <div class="created-time">2024-03-22 19:42:29</div>
      </div>

      <div class="card">
        <div class="text">
          吵架了。
        </div>
        <div class="created-time">2024-03-22 00:31:22</div>
      </div>

      <div class="card">
        <div class="text">
          今天你不在
        </div>
        <div class="created-time">2024-03-23 08:40:12</div>
      </div>

      <div class="card">
        <div class="text">
          思念想风，能到达任何地方，我期待风起，而你，好像更希望风停。
        </div>
        <div class="created-time">2024-03-23 00:31:22</div>
      </div>

      <div class="card">
        <div class="text">
          佳宜喜欢我的头像，开心。
        </div>
        <div class="created-time">2024-03-24 09:57:13</div>
      </div>

      <div class="card">
        <div class="text">
          佳宜在
        </div>
        <div class="created-time">2024-03-24 09:57:13</div>
      </div>

      <div class="card">
        <div class="text">
          佳宜在手机上为我学做菜哈哈哈
        </div>
        <div class="created-time">2024-03-25 10:23:30</div>
      </div>

      <div class="card">
        <div class="text">
          跟佳宜说我的社会经历
        </div>
        <div class="created-time">2024-03-25 23:50:39</div>
      </div>


      <div class="card">
        <div class="text">
          我爱你
        </div>
        <div class="created-time">2024-03-26 02:15:46</div>
      </div>

      <div class="card">
        <div class="text">
          我想过很多次跟别人好，但是我不忍心丢下你。
        </div>
        <div class="created-time">2024-03-27 09:55:03</div>
      </div>

      <div class="card">
        <div class="text">
          我爱你 问心无愧
        </div>
        <div class="created-time">2024-03-27 19:30:40</div>
      </div>

      <div class="card">
        <div class="text">
          你一定要过得比我好。
        </div>
        <div class="created-time">2024-03-27 19:30:40</div>
      </div>

      <div class="card">
        <div class="text">
          好想你，想的是我的陆佳佳，而不是别人的陆佳宜。
        </div>
        <div class="created-time">2024-03-27 20:11:25</div>
      </div>

      <div class="card">
        <div class="text">
          今天跟佳宜用了“心动日常”，我爱你宝儿。
        </div>
        <div class="created-time">2024-06-11 16:50:05</div>
      </div>

      <div class="card">
        <div class="text">
          宝儿，要见面，要结婚。
        </div>
        <div class="created-time">2024-06-11 17:48:33</div>
      </div>

      <div class="card">
        <div class="text">
          2024-12-20，你好
        </div>
        <div class="created-time">2024-12-20 09:12:52</div>
      </div>

      <p class="no-more">敬请期待...</p>
    </div>

    <div class="footer">
      <button id="back">返回</button>
      <button id="clear-text">清除文字</button>
    </div>

    <audio style="display: none; height: 0" id="music-birth" controls autoplay src="static/music/r.m4a"></audio>
  </div>

  <script>
    const backBtn = document.querySelector('#back')
    backBtn.addEventListener('click', () => {
      window.location.href = "/love-jiayi"
    })

    const clearText = document.querySelector('#clear-text')
    clearText.addEventListener('click', () => {
      document.querySelector('.content').innerHTML = null
    })
    // 点击播放音乐

    const eleMusic = document.querySelector('#music-birth')

    const toggleMute = document.querySelector('.toggle-mute')

    toggleMute.addEventListener('click', function (e) {
      e.stopPropagation()
      if (eleMusic.paused) {
        // document.body.style.backgroundColor = '#bcebbd'
        // 播放音乐
        eleMusic.play();
        return;
      }
      // 暂停音乐
      eleMusic.pause();
    })


    let timer = 2000;
    let i = 1;
    const content = document.querySelector('.content');
    let imgEle = null;
    function updateImg() {
      setTimeout(() => {
        imgEle && content.removeChild(imgEle)
        imgEle = document.createElement('img')
        imgEle.src = `static/img/${i}.jpg`
        imgEle.style.width = '100%'
        imgEle.style.height = '100%'
        content.appendChild(imgEle)
        timer -= 130;
        if (i === 11) {
          setTimeout(() => {
            imgEle && content.removeChild(imgEle)
            const cardList = content.querySelectorAll('.card')
            for (let index = 0; index < cardList.length; index++) {
              const element = cardList[index];
              element.style.display = 'block';
            }
          }, 5000)
          return
        }
        i++;
        updateImg()
      }, timer)
    }


    const t1 = 1000 * 60 + 16 * 1000;
    setTimeout(() => {
      const cardList = content.querySelectorAll('.card')
      for (let index = 0; index < cardList.length; index++) {
        const element = cardList[index];
        element.style.display = 'none';
      }
      content.querySelector('.no-more').style.display = 'none'

      imgEle = document.createElement('img')
      imgEle.src = `static/img/0.jpg`
      imgEle.style.width = '100%'
      imgEle.style.height = '100%'
      content.appendChild(imgEle)

      updateImg()
    }, t1);

  </script>
</body>

</html>
